<!DOCTYPE html>
<html>

<head>
	<meta  charset="UTF-8" />
	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=9" /><![endif]-->
	<title>TJ Creative Studio</title>
	<link rel="stylesheet" href="css/main.css?last2" type="text/css" media="screen" />
	<link rel="icon" type="image/vnd.microsoft.icon" href="images/favicon.png">
    <noscript>
       <link rel="stylesheet" href="css/noscript.css" type="text/css" media="screen" />
    </noscript>
</head>
<body class="blue">
	    <div id="preloader">&nbsp;</div>

		<ul id="logo-menu">
			<li class="arrow">&nbsp;</li>
		     <li id="logo" > <img src="images/logo.png" alt="TJ Creativer Studio"/> </li>
			 <li id="menu">
			     <ul> 
		             <li><a href="#index">HOME</a></li>
				     <li>
				          <a href="#about">ABOUT</a>
				          <ul>
				              <li><a href="#about/overview">Overview</a></li>
				              <li><a href="#about/technical-skills">Technical Skills</a></li>
				              <li><a href="#about/education">Education</a></li>
				          </ul>
				     </li>
 		             <li>
				          <a href="#portfolio">PORTFOLIO</a>
				          <ul>
				              <li><a href="#portfolio/all">Everything</a></li>
				              <li><a href="#portfolio/webdesign">Web Design</a></li>
				              <li><a href="#portfolio/webdevelopment">Web Development</a></li>
				          </ul>
				     </li>
				     
				     <li>
				          <a href="#blog">BLOG</a>
				          <ul>
				              <li><a href="#blog/all">Everything</a></li>
				              <li><a href="#blog/webdesign">Web Design</a></li>
				              <li><a href="#blog/webdevelopment">Web Development</a></li>
				          </ul>
				     </li>
				     <li><a href="#contact">CONTACT</a></li>
			     </ul>			  
			 </li>
			 <li id="extra"> <img width="6" src="images/a.png" alt=""> </li>
		</ul><!-- End of Logo & Menu --> 

			
		<!-- Begin of Page Slider -->	
        <div id="pageSlider">
	        <ul>
		          <!-- Begin of INDEX Page -->
		          <li id="index">
		          				          	
		              <ul class="page"> 
 		                 <li class="top">&nbsp;</li>
 		                 <li class="middle">
 		    
 		                 	<div id="prevButton"> <span class="arrow">&nbsp;</span> <a href="#" class="nivo-prevNav"> <img src="images/prev.png" alt="Previous" /> </a></div>
 		                 	<div id="nextButton"> <span class="arrow">&nbsp;</span> <a href="#" class="nivo-nextNav"> <img src="images/next.png" alt="Next" /> </a></div>
				     
				          		   <ul class="subPages">
				          		       <li>
				          		         <div id="slider">
     	          		                     <a href="project.html" class="nivo-imageLink details"><img alt="Image Caption" src="images/projects/featured-1.jpg"></a>
				          		             <a href="project.html" class="nivo-imageLink details"><img alt="Image Caption" title="This is an example with caption" src="images/projects/featured-2.jpg"></a>
				          		     		 <a href="project.html" class="nivo-imageLink details"><img alt="Image Caption" src="images/projects/featured-3.jpg"></a>
				          		     		 <a href="project.html" class="nivo-imageLink details"><img alt="Image Caption" src="images/projects/featured-4.jpg"></a>
				          		             <a href="project.html" class="nivo-imageLink details"><img alt="Image Caption" src="images/projects/featured-5.jpg"></a>			          		          
				          		         </div>

						                  <ul class="columns">
							                  <li> 
						                          <h3>WEB & APP DEVELOPMENT</h3>
						                           <img src="images/web-development.png" alt="Web Development"/>Lorem ipsum situs amet adisicing sit consectoera, ametus  adisicing elites sedimas diamans nonumy nibhs euismod.  <p> <a class="Tbutton" href="#portfolio/webdevelopment">View examples</a></p>
							                  </li>
							                  <li> 
						                          <h3>WEB & PRINT DESIGN</h3>
						                          <img src="images/web-design.png" alt="Web Design"/>Lorem ipsum situs amet adisicing sit consectoera, ametus  adisicing elites sedimas diamans nonumy nibhs euismod.  <p> <a class="Tbutton" href="#portfolio/webdevelopment">View examples</a></p>
							                  </li>
							                  <li> 
						                          <h3>READY TO FREELANCE</h3>
                                                  <img src="images/free_for_job.png" alt="Web Design"/>Lorem ipsum situs amet adisicing sit consectoera, ametus  adisicing elites sedimas diamans nonumy nibhs euismod.   <p> <a class="Tbutton" href="#contact">Let's colaborate ! </a>
							                  </li>
						            </ul>					
					           </li>
						  </ul>		 
				    </li>
				    <li class="bottom">&nbsp;</li>
				</ul>      
				                     
		    </li>
		    <!-- End of About Us page -->

                 <!-- Begin of About Us page -->
		          <li id="about">
		              <ul class="page"> 
 		                 <li class="top">
 		                     <div class="ribbon"><span class="arrow">&nbsp;</span>
 		                 	     	  <h2 style="float:left;">About me </h2> 
 		                 	     	  <ul class="sidemenu">
 		                 	     	    <li class="active"><a href="#overview">Overview</a></li>
 		                 	     	    <li><a href="#technical-skills">Tehnical skills</a></li>
 		                 	     	    <li><a href="#education">Education</a></li>
 		                 	     	  </ul>	
 		                 	       </div>   
 		                 </li>
 		                 <li class="middle">
				          		   <ul class="subPages">
				          		       <li id="overview">
				          		          <img class="imageFloat" src="images/photo.jpg" alt="Photo Description">                                     
						                  <dl class="skills">
						                      <dt>Name:</dt><dd>Talha Jamil </dd>
				          		              <dt>Ocupation:</dt><dd>Web designer / developer</dd>
				          		              <dt>Hourly rate:</dt><dd>$25 </dd>
				          		              <dt>Experience:</dt><dd>+8 years</dd>
				          		              <dt>Freelance:</dt><dd>I am available</dd>
				          		          </dl>
				          		          
                                          <a href="#portfolio" class="button small" style="margin-right:25px;">My work</a><a href="#contact" class="button small">Quote request</a>
						                  <ul class="columns-small-big">
								              <li> 
								                   <h3> SPONSORS </h3>
						                           <ul class="sponsor">
						                               <li><img src="images/sponsor_1.png" alt="ad" /></li>
						                               <li><img src="images/sponsor_2.png" alt="ad" /></li>
			    	                               </ul>                 
							                  </li>
							                  <li> 
							                     <h3> COLABORATORS & TESTIMONIALS </h3>
							                     
						                         <ul class="testimonials">
						                            <li>
						                               <img src="images/male.png" alt="Male">
						                               Lorem ipsum  adisiciang sit ametus, consectoeris  adisicing elites, sedimain diaman nonumy nibhs euismod tinciduntut laoret dollores sedi diam nonummy nibh euismod tincidunt  <br> <a href="#">John Doe, CEO</a>
						                            </li>
						                            <li>
						                               <img src="images/female.png" alt="Female">
						                               Lorem ipsum  adisiciang sit ametus, consectoeris  adisicing elites, sedimain diaman nonumy nibhs euismod tinciduntut laoret dollores sedi diam nonummy nibh euismod tincidunt  <br> <a href="#">Megan Dolor, Manager</a>
						                            </li>

				                                    <li>
						                               <img src="images/female.png" alt="Female">
						                               Lorem ipsum  adisiciang sit ametus, consectoeris  adisicing elites, sedimain diaman nonumy nibhs euismod tinciduntut laoret dollores sedi diam nonummy nibh euismod tincidunt  <br> <a href="#">Marry Johnson, Designer</a>
						                            </li>
						                            
						                             
						                            <li>
						                               <img src="images/male.png" alt="Male">
						                               Lorem ipsum  adisiciang sit ametus, consectoeris  adisicing elites, sedimain diaman nonumy nibhs euismod tinciduntut laoret dollores sedi diam nonummy nibh euismod tincidunt  <br> <a href="#">James Doe, Developer</a>
						                            </li>
		
						                            <li>
						                               <img src="images/male.png" alt="Male">
						                               Lorem ipsum  adisiciang sit ametus, consectoeris  adisicing elites, sedimain diaman nonumy nibhs euismod tinciduntut laoret dollores sedi diam nonummy nibh euismod tincidunt  <br> <a href="#">Martin Scott, Support</a>
						                            </li>
						                            <li>
						                               <img src="images/female.png" alt="Female">
						                               Lorem ipsum  adisiciang sit ametus, consectoeris  adisicing elites, sedimain diaman nonumy nibhs euismod tinciduntut laoret dollores sedi diam nonummy nibh euismod tincidunt  <br> <a href="#">Anna Doe, Support</a>
						                            </li>

						                        </ul>

							                  </li>

						            </ul>	
						
					                 </li>
					                 <!-- Begin of Tehnical Skills -->	
					                 <li id="technical-skills">
					 	                <ul class="rows">
							               <li>
							                  <h3>WEB DESIGN &amp; DEVELOPMENT</h3> <h5> ADVANCED,&nbsp; 5 years </h5>
								              <p>
								               	 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut  laoreet dolore magna aliqua erat volutpat. 
									             Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip.
                                              </p>
                                              <ul>
                                                  <li><b>Css</b> - Lorem ipsum dolor sit amet</li>
                                                  <li><b>Html</b> - Consectetuer adipiscing elit</li>
                                                  <li><b>Javascript / jQuery</b> - Sed diam nonummy nibh euismod tincidunt</li>
                        
                                              </ul>
                                           </li>
                                           <li>
                                              <h3>GRAPHIC DESIGN  </h3>  <h5> ADVANCED,&nbsp; 4 years </h5>
                                              <p>
                                                 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut  laoreet dolore magna aliqua erat volutpat. 
									             Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip.
								              </p>
                                              <ul>
                                                  <li><b>Adobe Photoshop</b> - Lorem ipsum dolor sit amet</li>
                                                  <li><b>Adobe Fireworks</b> - Consectetuer adipiscing elit</li>
                                              </ul>
								           </li>
								           <li>
								               <h3>PRINT DESIGN  </h3>  <h5> BEGINER,&nbsp; 2 years </h5>
								               <p>
								                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut  laoreet dolore magna aliqua erat volutpat. 
								                  Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip.								               
								               </p>
								           </li>								           

								        </ul>
								    </li>  
								    <!-- End of Tehnical Skills -->
								    
								    <!-- Begin of Education  -->
								    <li id="education">
								       <ul class="rows">
								          <li>
								              <h3>BASIS Charter, Tucson - High school   </h3>  <h5> 2000 - 2004 </h5>
								              <p>
								              	 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut  laoreet dolore magna aliqua erat volutpat. 
								              	 Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip.
								              </p>
								              <ol>
								              	     <li>Lorem ipsum dolor sit amet</li>
								              	     <li>Consectetuer adipiscing elit</li>
						
								              	     
								              </ol>
							
								          </li>
								          <li>
								          	 <h3>Massachusetts Institute of Technology  </h3>  <h5> 2004 - 2007 </h5>
								          	 <p>
								          	 	Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut  laoreet dolore magna aliqua erat volutpat. 
									            Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip.
								             </p>
							              </li>
							              <li>
							              	  <h3>DESIGN UNIVERSITY  </h3>  <h5> 2007 - 2010 </h5>
							              	  <p>
							              	   	 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut  laoreet dolore magna aliqua erat volutpat. 
							              	   	 Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip.  							              	
							              	  </p>
							              	  <ul>
								              	  <li>Lorem ipsum dolor sit amet</li>
								              	  <li>Consectetuer adipiscing elit</li>
								              	  <li>Sed diam nonummy nibh</li>
								              </ul>							              	  
							              </li>
							          </ul>
							      </li> <!-- End of Education -->
							      
							  </ul>
				         
						 
				    </li>
				    <li class="bottom">&nbsp;</li>
				</ul>                           
		    </li>
		    <!-- End of About Us page -->

            <!-- Begin of Portfolio page -->
		    <li id="portfolio">
 		         <ul class="page"> 
 		             <li class="top"> 		                    
 		                <div class="ribbon"><span class="arrow">&nbsp;</span>
 		                 	 <h2 style="float:left;">Portfolio</h2> 
                             <ul class="portfolio_filter sidemenu">
 		                 	     <li class="active"><a href="#" data-value="all">Everything</a></li>
 		                 	     <li><a href="#" data-value="webdesign">Design</a></li>
 		                 	     <li><a href="#" data-value="webdevelopment">Development</a></li>          
 		                 	  </ul>
 		                 </div>
 		             </li>
 		             <!-- Begin of Content -->
 		             <li class="middle">

 		             		  
 		             		  <div class="projects_controls">
 		             				<a href="#" id="gallery_view">&nbsp;</a> <a href="#" id="list_view" class="active">&nbsp;</a>  <br> 		                 	                
 		                 	        
 		                 	        <ul class="portfolio_sort">
 		                 	                     <li>Sort By:</li>
 		                 	                     
 		                 	                     <li class="active"><a href="#" class="SortType asc" title="ASC">&nbsp;</a> <a href="#" class="sort" data-value="id">Id</a></li>
 		                 	                     <li><a href="#" class="SortType asc" title="ASC">&nbsp;</a> <a href="#" class="sort" data-value="title">Title</a></li>
 		                 	                     <li><a href="#" class="SortType asc" title="ASC">&nbsp;</a> <a href="#" class="sort" data-value="price">Price</a></li>
 		                 	        </ul>
 		                 	         
 		             		  </div>
 		             		  <div class="clearfix">&nbsp;</div>
 		             		          			 
				          	  <ul class="subPages">
				          		     <li>

			          		         <ul class="projects">
				          		             <li data-id="1" class="webdesign">
				          		                 <img  src="images/projects/project-1.jpg" alt="Project 1" height="180" width="350"/>
				          		                 
				          		                    <div class="description">		               
				          		                     <h3>Süd diam nonummy nibh euismodSedi diam nibh</h3> <br /> 
                                                     
                                                     <div class="clearfix">&nbsp;</div>
                                                     
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt, ut laoreet dolores magna aliquam erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, qui nostrud, exerci tation ula mcorpe suscipit. 				                             
					                                   
					                                 <h4>Software & Technologies used :</h4>
					                                 <ul class="inline-list"><li>Adobe Photoshop, </li><li>Adobe Dreamweaver, </li><li>XHTML, </li><li>CSS, </li><li>JavaScript.</li></ul>
					                                                                             					                                
					                                 <a href="project.html" class="button small details">More details</a>
					                             </div>
				          		             </li>
				          		             <li data-id="2" class="webdevelopment">
				          		                 <img  src="images/projects/project-2.jpg" alt="Project 2" height="180" width="350"/>
				          		                   <div class="description">	               
				          		                     <h3>Laoreet dolore magna </h3> <br />
                                                     
                                                     <div class="clearfix">&nbsp;</div>
                                                     
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt, ut laoreet dolores magna aliquam erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, qui nostrud, exerci tation ula mcorpe suscipit.		                             
					                                   
					                                 <h4>Software & Technologies used :</h4>
					                                 <ul class="inline-list"><li>Adobe Photoshop, </li><li>Adobe Dreamweaver, </li><li>XHTML, </li><li>CSS, </li><li>JavaScript.</li></ul>
					                                                                             					                                
					                                 <a href="project.html" class="button small details">More details</a>
					                               </div>  
				          		             </li>
				          		             
				          		             <li data-id="3" class="webdesign">
				          		                 <img  src="images/projects/project-3.jpg" alt="Project 3" height="180" width="350"/>
				          		                   <div class="description">		               
				          		                     <h3>Lorem ipsum dolor sit amet </h3> <br />
                                                     
                                                     <div class="clearfix">&nbsp;</div>
                                                     
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt, ut laoreet dolores magna aliquam erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, qui nostrud, exerci tation ula mcorpe suscipit.	                             
					                                   
					                                 <h4>Software & Technologies used :</h4>
					                                 <ul class="inline-list"><li>Adobe Photoshop, </li><li>Adobe Dreamweaver, </li><li>XHTML, </li><li>CSS, </li><li>JavaScript.</li></ul>
					                                                                             					                                
					                                 <a href="project.html" class="button small details">More details</a>
					                               </div>  
				          		             </li>

				          		             <li data-id="4" class="webdevelopment">
				          		                 <img  src="images/projects/project-4.jpg" alt="Project 4" height="180" width="350"/>
				          		                 <div class="description">			               
				          		                     <h3>Consectetuer adipiscing elit</h3> <br />
                                                     
                                                     <div class="clearfix">&nbsp;</div>
                                                     
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt, ut laoreet dolores magna aliquam erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, qui nostrud, exerci tation ula mcorpe suscipit.		                             
					                                   
					                                 <h4>Software & Technologies used :</h4>
					                                 <ul class="inline-list"><li>Adobe Photoshop, </li><li>Adobe Dreamweaver, </li><li>XHTML, </li><li>CSS, </li><li>JavaScript.</li></ul>
					                                                                             					                                
					                                 <a href="project.html" class="button small details"> Details</a>  			          		             
					                             </div>
					                         </li>
				          		             
				          		             <li data-id="5" class="webdesign">
				          		                  <img  src="images/projects/project-5.jpg" alt="Project 5" height="180" width="350"/>
				          		                  <div class="description">			                
				          		                     <h3>Paliqua erat volutpat  </h3> <br />
                                                     
                                                     <div class="clearfix">&nbsp;</div>
                                                     
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt, ut laoreet dolores magna aliquam erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, qui nostrud, exerci tation ula mcorpe suscipit.		                             
					                                   
					                                 <h4>Software & Technologies used :</h4>
					                                 <ul class="inline-list"><li>Adobe Photoshop, </li><li>Adobe Dreamweaver, </li><li>XHTML, </li><li>CSS, </li><li>JavaScript.</li></ul>
					                                                                             					                                
					                                 <a href="project.html" class="button small details">More details</a>			          		             
					                              </div>
					                         </li>
				          		             <li data-id="6" class="webdevelopment">
				          		                 <img  src="images/projects/project-6.jpg" alt="Project 6" height="180" width="350"/>
				          		                 <div class="description">			               
				          		                     <h3>Ut wisi enim ad minim veniam </h3> <br />
                                                     
                                                     <div class="clearfix">&nbsp;</div>
                                                     
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt, ut laoreet dolores magna aliquam erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, qui nostrud, exerci tation ula mcorpe suscipit.		                             
					                                   
					                                 <h4>Software & Technologies used :</h4>
					                                 <ul class="inline-list"><li>Adobe Photoshop, </li><li>Adobe Dreamweaver, </li><li>XHTML, </li><li>CSS, </li><li>JavaScript.</li></ul>
					                                                                             					                                
					                                 <a href="project.html" class="button small details">More details</a>
				          		                  </div>
				          		             </li>
				          		             
				          		             <li data-id="7" class="webdesign">
				          		                 <img  src="images/projects/project-7.jpg" alt="Project 7" height="180" width="350"/>
				          		                 <div class="description">			               
				          		                     <h3>Quis nostrud exerci tation ulla  </h3> <br />                                                     
                                                     <div class="clearfix">&nbsp;</div>
                                                     
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt, ut laoreet dolores magna aliquam erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, qui nostrud, exerci tation ula mcorpe suscipit.		                             
					                                   
					                                 <h4>Software & Technologies used :</h4>
					                                 <ul class="inline-list"><li>Adobe Photoshop, </li><li>Adobe Dreamweaver, </li><li>XHTML, </li><li>CSS, </li><li>JavaScript.</li></ul>
					                                                                             					                                
					                                 <a href="project.html" class="button small details">More details</a>
					                             </div>
				          		             </li>

				          		             <li data-id="8" class="webdesign">
				          		                  <img  src="images/projects/project-8.jpg" alt="Project 8" height="180" width="350"/>
				          		                  <div class="description">			                
				          		                     <h3>Paliqua erat volutpat  </h3> <br /> 
                                                     
                                                     <div class="clearfix">&nbsp;</div>
                                                     
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt, ut laoreet dolores magna aliquam erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, qui nostrud, exerci tation ula mcorpe suscipit.		                             
					                                   
					                                 <h4>Software & Technologies used :</h4>
					                                 <ul class="inline-list"><li>Adobe Photoshop, </li><li>Adobe Dreamweaver, </li><li>XHTML, </li><li>CSS, </li><li>JavaScript.</li></ul>
					                                                                             					                                
					                                 <a href="project.html" class="button small details"> Details</a> 			          		             
					                              </div>
					                         </li>
				          		             <li data-id="9" class="webdevelopment">
				          		                 <img  src="images/projects/project-1.jpg" alt="Project 1" height="180" width="350"/>
				          		                 <div class="description">			               
				          		                     <h3>At wisi enim ad minim veniam </h3> <br />
                                                     
                                                     <div class="clearfix">&nbsp;</div>
                                                     
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elite, sed diam nonummy nibh euismod tincidunt, ut laoreet dolores magna aliquam erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, qui nostrud, exerci tation ula mcorpe suscipit.			                             
					                                   
					                                 <h4>Software & Technologies used :</h4>
					                                 <ul class="inline-list"><li>Adobe Photoshop, </li><li>Adobe Dreamweaver, </li><li>XHTML, </li><li>CSS, </li><li>JavaScript.</li></ul>
					                                                                             					                                
					                                 <a href="project.html" class="button small details">More details</a>
				          		                  </div>
				          		             </li>
				   
				          		         </ul>

								    </li>  
								    <!-- End of Web Development -->


							  </ul>						 
				    </li>
				    <li class="bottom">&nbsp;</li>
				</ul>                           
		    </li>
		    <!-- End of Portfolio -->
		    
            <!-- Begin of Blog -->
		    <li id="blog">
 		         <ul class="page"> 
 		             <li class="top"> 		                   
 		                  <div class="ribbon"><span class="arrow">&nbsp;</span>
 		                 	   <h2 style="float:left;">Blog</h2> 
                                   <ul class="blog_filter sidemenu">
 		                 	           <li class="active"><a href="#" data-value="all">Everything</a></li>
 		                 	           <li><a href="#" data-value="webdesign">Design</a></li>
 		                 	           <li><a href="#" data-value="webdevelopment">Development</a></li>
 		                 	       </ul>
 		                 	</div>
 		             </li>

 		             <li class="middle">
 		             		   
 		             		  <div class="blog_controls">
 		             				<div id="searchCount"></div><label for="search">Search</label><input type="text" name="search" id="search" value=""><br>	                 	                
 		                 	        <ul class="blog_sort">
 		                 	                     <li>Sort By:</li>
 		                 	                     <li class="active"><a href="#" class="SortType asc" title="Ascendent">&nbsp;</a> <a href="#" class="sort" data-value="id">Id</a></li>
 		                 	                     <li><a href="#" class="SortType asc" title="Ascendent">&nbsp;</a> <a href="#" class="sort" data-value="title">Title</a></li>
 		                 	                     <li><a href="#" class="SortType asc" title="Ascendent">&nbsp;</a> <a href="#" class="sort" data-value="comments">Comments</a></li>
 		                 	        </ul>
 		                 	        
 		                 	         	                 	        
 		             		  </div>
 		             		          			 
				          		 <ul class="subPages">
				          		     <li>

			          		         <ul class="blog">
				          		             <li data-id="1" class="webdesign">
				          		                
				          		               <div class="date">  <span class="day">29</span> <span class="month">MAY</span> <span class="year">2011</span></div>
				          		               <h3>Amet ipsum dolor  sit amet</h3>  
                                                <img  src="images/projects/project-1.jpg" alt="Project 1" height="140" width="275"/>
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sedim diam nonummy nibh euismod tincidunt ut  laoreet dolore magnas aliqua erat volutpaet. 
							              	   	     Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip , lorem ipsum dolor sit ament consectetuer. 	
							              	   	     Lorem ipsum dolor sit ament, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
							              	   	     <p>by <a href="#">John Doe</a> posted in <a href="#">webdesign</a></p>                                            					                                
					                                 <a href="#" class="button small comments">4 comments </a><a href="blog_post.html" class="button small details"> Read more</a>  
					                                 
					                                 
				          		             </li>
				          		             
				          		             <li data-id="2" class="webdevelopment">
				          		                
				          		               <div class="date">  <span class="day">20</span> <span class="month">MAY</span> <span class="year">2011</span></div>
				          		               <h3>Diam amet nonummy  nibh euismod </h3>  
                                                <img  src="images/projects/project-1.jpg" alt="Project 1" height="140" width="275"/>
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut  laoreet dolore magna aliqua erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip, lorem ipsum dolor sit amet consectetuer. 	
							              	   	     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
							              	   	     <p>by <a href="#">James Johnson</a> posted in <a href="#">webdevelopment</a></p>  
					                                 <a href="#" class="button small comments">25 comments </a><a href="blog_post.html" class="button small details"> Read more</a>  
				          		             </li>
				          		             
				          		             <li data-id="3" class="webdesign">
				          		                
				          		               <div class="date">  <span class="day">17</span> <span class="month">MAY</span> <span class="year">2011</span></div>
				          		               <h3>Consectetuer adipiscing elit</h3>  
                                                <img  src="images/projects/project-2.jpg" alt="Project 2" height="140" width="275"/>
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut  laoreet dolore magna aliqua erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip, lorem ipsum dolor sit amet consectetuer. 	
							              	   	     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
							              	   	     <p>by <a href="#">John Doe</a> posted in <a href="#">webdesign</a></p>                                     					                                
					                                 <a href="#" class="button small comments">13 comments </a><a href="blog_post.html" class="button small details"> Read more</a>  
				          		             </li>				          		             
				          		             
				          		             <li data-id="4" class="webdevelopment">
				          		                
				          		               <div class="date">  <span class="day">28</span> <span class="month">JUN</span> <span class="year">2011</span></div>
				          		               <h3>Bam wisi enim ad minim veniam</h3>  
                                                <img  src="images/projects/project-3.jpg" alt="Project 3" height="140" width="275"/>
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut  laoreet dolore magna aliqua erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip, lorem ipsum dolor sit amet consectetuer. 	
							              	   	     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
							              	   	     <p>by <a href="#">James Johnson</a> posted in <a href="#">webdevelopment</a></p>                                            					                                
					                                 <a href="#" class="button small comments">1 comment </a><a href="blog_post.html" class="button small details"> Read more</a>  
				          		             </li>	
				          		             
				          		             				          		             
				          		             <li data-id="5" class="webdesign">
				          		                
				          		               <div class="date">  <span class="day">21</span> <span class="month">JUN</span> <span class="year">2011</span></div>
				          		               <h3>Elid diam nonummy  nibh euismod</h3>  
                                                <img  src="images/projects/project-4.jpg" alt="Project 4" height="140" width="275"/>
                                                
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut  laoreet dolore magna aliqua erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip, lorem ipsum dolor sit amet consectetuer. 	
							              	   	     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
							              	   	     <p>by <a href="#">John Doe</a> posted in <a href="#">webdesign</a></p>                                      					                                
					                                 <a href="#" class="button small comments">12 comments </a><a href="blog_post.html" class="button small details"> Read more</a>  
				          		             </li>	
				          		             
				          		             <li data-id="6" class="webdevelopment">
				          		                
				          		               <div class="date">  <span class="day">19</span> <span class="month">JUN</span> <span class="year">2011</span></div>
				          		               <h3>Faoret dolore magna aliqua erat volutpat</h3>  
                                                <img  src="images/projects/project-1.jpg" alt="Project 1" height="140" width="275"/>
                                                     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut  laoreet dolore magna aliqua erat volutpat. 
							              	   	     Ut wisi enim ad minim veniam, quis nostrud exerci tation ulla  mcorper suscipit lobortis nisl ut aliquip, lorem ipsum dolor sit amet consectetuer. 	
							              	   	     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
							              	   	     <p>by <a href="#">James Johnson</a> posted in <a href="#">webdevelopment</a></p>                                             					                                
					                                 <a href="#" class="button small comments">10 comments </a><a href="blog_post.html" class="button small details"> Read more</a>  
				          		             </li>	
				          		             
				          		         </ul>
				          		         
								    </li>  
								    <!-- End of Web Development -->
							  </ul>						 
				    </li>
				    <li class="bottom">&nbsp;</li>
				</ul>                           
		    </li>
		    <!-- End of Blog -->
		    
		    
            <!-- Begin of Contact -->
		    <li id="contact">
 		         <ul class="page"> 
 		             <li class="top"> 		                 
 		                 <div class="ribbon"><span class="arrow">&nbsp;</span>
 		                 	 <h2 style="float:left;">Contact Us</h2> 	
 		                 </div> 		             
 		             </li>
 		             <!-- Begin of Content -->
 		             <li class="middle">
				          <ul class="subPages">
				          	 <li>
							          
							     <ul class="columns">
							         <li>
							             * Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
							             <form name="contact_form" id="contact_form">
							             
                                            <label for="name">Your Name * </label> <input type="text" name="name" value="" id="name" /><br/>
                                            <label for="email">Email * </label> <input type="text" name="email" value="" id="email" /><br/>

                                            
                                            <label for="reason"> Reason </label> 
                                            
                                            <select name="reason" id="reason">
                                                <option selected="selected">None</option>
                                                <option>Lorem ipsum 1</option>
                                                <option>Lorem ipsum 2</option>
                                                <option>Lorem ipsum 3</option>
                                                <option>Lorem ipsum 4</option>
                                            </select> <br>

                                           <label for="title">Subject *</label> <input type="text" name="title" value="" id="title"/><br>
                                         
                                            <span>Message *</span>                                       
                                            <textarea name="message" id="message" rows="6" cols="5"></textarea><br>
          
                                            <input type="submit" name="submit" value="Send Message" id="submit" class="button medium"/> 
                                            
                                            <ul class="sendingStatus">   
                                                   <li class="sending"><img src="images/ajax-loader.gif" alt="Sending"> Sending Message </li>    
                                                   <li class="error"><img src="images/dialog-error.png" alt="Error"> Error, try again later ! <a href="#" class="close">&nbsp;</a></li>
                                                   <li class="success"><img src="images/big_success.png" alt="Success"> Message Sent <a href="#" class="close">&nbsp;</a></li> 
                                            </ul>
                         
                                         </form>
                                     </li>
                                     <li>  
                                           <img class="image" src="images/map.jpg" alt="Address" style="margin:0 0 15px 0;"/>
                                                                    
                                           <h3> Office Location </h3>   
                                
                                           <h4> Washington, DC </h4>
                                           <h4> +92 (345) 210-3687 </h4>
                                           <h4><a href="mailto:youremail@email.com">mtalhak@gmail.com </a></h4>
                                           
                                           <div class="clearfix">&nbsp;</div>
                                           <h3> Social Media </h3>   
                                           <ul class="socials">
                                           		<li><a href="#"><img src="images/1286539929_facebook_02.png" alt="Social" /></a></li>
                                           		<li><a href="#"><img src="images/1286539924_myspace_01.png" alt="Social" /></a></li>
                                           		<li><a href="#"><img src="images/1286539976_twitter_01.png" alt="Social" /></a></li>
                                           		<li><a href="#"><img src="images/1286539962_technorati_02.png" alt="Social" /></a></li>
                                           		<li><a href="#"><img src="images/1286539933_delicious.png" alt="Social" /></a></li>
                                           		<li><a href="#"><img src="images/1286539986_RSS_02.png" alt="Social" /></a></li>
                                           </ul>                        
                                     </li>  
							          
							     </ul>
					         </li>
						 </ul>		
						 				 
				    </li>
				    <li class="bottom">&nbsp;</li>
				</ul>                           
		    </li>		    <!-- End of Contact -->
   
		 </ul>   
     </div> <!-- END pageSlider --> 
     
     
	 <div id="footer" class="visible">
	       <div><div>&copy; <a href="http://about.me/talhakhan" target="_blank">designed by TJ Creative Studio</a>
	       <ul class="footer_controls"> 
	       	  <li>
	             <a href="#" class="sprite-settings" title="Settings">&nbsp;</a> 
	             <div><a href="#" class="close">&nbsp;</a>
	  
	             <ul class="settings">
	                 <li> 
	                     <h3>Background:</h3>
	                     <ul id="background_chooser">
	                         <li><img alt="Background1" src="images/wood_thumb.jpg"></li>
	                         <li><img alt="Background2" src="images/wood2_thumb.jpg"></li>
	                         <li><img alt="Background3" src="images/pattern_thumb.jpg"></li>
	                         <li><img alt="Background4" src="images/pattern2_thumb.jpg"></li>
	                     </ul>
	                 </li>
	                 <li>
	                     <b style="float:left; margin:2px 20px 0 0;">Logo &amp; buttons color:</b>  
	                     <ul id="color_chooser">
	                          <li class="blue active">&nbsp;</li>
	                          <li class="gray">&nbsp;</li>
	                     </ul>  
	                  </li>   
	                 <li>  <b style="float:left; margin:2px 20px 0 0;">Page slider:</b> &nbsp;
	                 <br>       <br>
	                 <span class="switch">
	                      <input type="radio" id="pageSliderVariant1" name="pageSliderVariant" value="vertical" />
	                      <input type="radio" id="pageSliderVariant2" name="pageSliderVariant" value="horisontal" />
	                      <input type="radio" id="pageSliderVariant3" name="pageSliderVariant" value="none" />
	                      
	                      <label for="pageSliderVariant1" class="cb-enabled"><span>Vertical</span></label>
                          <label for="pageSliderVariant2" class="cb-middle"><span>Horizontal</span></label> 
                          <label for="pageSliderVariant3" class="cb-disabled"><span>None</span></label>
                     </span>


</li>
	                       
	                 <li> <b style="float:left; margin:2px 20px 0 0;">Style:</b>                 
	                 <span class="switch">
	                      <input type="radio" id="pageStyleVariant1" name="pageStyleVariant" value="dark" />
	                      <input type="radio" id="pageStyleVariant2" name="pageStyleVariant" value="light" />
	                      <label for="pageStyleVariant1" class="cb-enabled"><span>Dark</span></label>
                          <label for="pageStyleVariant2" class="cb-disabled"><span>Light</span></label>
                     </span>
                     </li>
 	                 <li> <b style="float:left; margin:2px 20px 0 0;">Menu style:</b>                 
	                 <span class="switch">
	                      <input type="radio" id="menuStyleVariant1" name="menuStyleVariant" value="fixed" />
	                      <input type="radio" id="menuStyleVariant2" name="menuStyleVariant" value="extensible" />
	                      <label for="menuStyleVariant1" class="cb-enabled"><span>Fixed</span></label>
                          <label for="menuStyleVariant2" class="cb-disabled"><span>Extensible</span></label>
                     </span>
                     </li>
                     
	             </ul>



			     <span class="arrow">&nbsp;</span></div>
	         </li>
	         <li>
	             <a href="#" class="sprite-social-connect" title="Social">&nbsp;</a> 
	             <div><a href="#" class="close">&nbsp;</a>
	              
	                <ul class="socials">
						<li><a href="#"><img src="images/1286539929_facebook_02.png" alt="Social" /></a></li>
						<li><a href="#"><img src="images/1286539924_myspace_01.png" alt="Social" /></a></li>
						<li><a href="#"><img src="images/1286539976_twitter_01.png" alt="Social" /></a></li>
			            <li><a href="#"><img src="images/1286539962_technorati_02.png" alt="Social" /></a></li>
						<li><a href="#"><img src="images/1286539933_delicious.png" alt="Social" /></a></li>
			            <li><a href="#"><img src="images/1286539986_RSS_02.png" alt="Social" /></a></li>
			    	  </ul>
			    	  
			     <span class="arrow">&nbsp;</span></div>	             
	         </li>
	         <li>
	             <a href="#" class="sprite-twitterPosts" title="Latest Tweets">&nbsp;</a> 
	             <div><a href="#" class="close">&nbsp;</a>
	              <h3>Latest Tweets:</h3>
	                    <div class='tweet'></div>
			    			    	  
			     <span class="arrow">&nbsp;</span></div>
			     
	          </li>
	         <li>
	             <a href="#contact" class="sprite-contact-me" title="Contact Us">&nbsp;</a> 	   
	         </li>
	         
	          <li><a href="#" class="sprite-hide_tool" title="Show / Hide Bar">&nbsp;</a></li>
	       </ul>
		  <a href="#" id="showTool">&nbsp;</a>
		  </div></div>
	</div>

	

	<script src="js/jquery-1.6.4.min.js"></script> 
    <script src="js/plugins.js"></script>
    <script src="js/custom37e3.js?20100608"></script>
    <!--[if gte IE 8]><script type="text/javascript"> Cufon.set('engine', 'canvas');</script><![endif]-->
	</body>
</html>